<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.transform {
				width: 100px;
				height: 100px;
				line-height: 100px;
				color: white;
				text-align: center;
				background-color: red;
				margin-left: 50px;
				transition: all 1s;
				/* transform-origin: left top; *//*改变元素调整转换的原点*/
				transform-origin: 50px 0px;
			}

			.transform:active {
				/* CSS 转换（transforms）允许您移动、旋转、缩放和倾斜元素。 */
				/* transform: translate | rotate | scale | skew; */
				/* transform: translate(200px,100px); */
				transform: rotate(60deg);
				/* transform: scale(1.5); */
				/* transform: skewX(-30deg); */
				/*沿 X 轴倾斜*/
			}

			.box {
				width: 400px;
				height: 400px;
				background-color: burlywood;
				position: relative;
			}

			.box>div {
				width: 100px;
				height: 100px;
				background-color: #ffff7f;
				/*以下是完美的垂直居中方法*/
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				/*translate移动的距离如果是 %，则是以自己的宽度为准*/
			}

			span {
				display: inline-block;
				text-align: center;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
			}
		</style>
	</head>
	<body>
		<h4>CSS 2D 转换</h4>
		<h4>transform:变形，缩放，移动，旋转,也需要加过度 transition </h4>
		<div class="transform">transform</div>

		<br>

		<div class="box">
			<div>
				<span>完美的垂直居中方法</span>
			</div>
		</div>
	</body>
</html>
